import React, { useState } from 'react'
import { Link, Routes, Route } from "react-router-dom"

import SubMenu from './SubMenu'

export default function MenuItem(props: MenuProps) {
  const [expand, setExpand] = useState(false)
  const {id, path, permits} = props
  const name = path!.substring(path!.lastIndexOf("/")+1)
  const routePath = name+"/*"
  const children = permits.filter(p=>p.parentId===id)
  const menuProps = {permits, children}

  const fold=()=>{
    setExpand(!expand)
  }

  return (
    <li><Link onClick={fold} to={path!}>{name}</Link>
      <Routes>
        <Route path={routePath} element={expand?<SubMenu {...menuProps}/>:<></>} />
      </Routes>
    </li>
  )
}
